<template>
	<view class=" page">
		<view class="container">
			<view class="flex  align-center bac-color-fff pj-top mar-t-20">
				<view class="tag-lag">

				</view>
				<view class="flex-1 mar-l-5 font-bold">
					帮扶总体评价
				</view>
				<view>
					<htz-rate v-model="score_info.zhpf"></htz-rate>
				</view>
			</view>
			<view class="  pj-card pad-t-15 pad-b-20 mar-t-20 bac-color-fff">
				<view class="font-color-888 align-center flex justify-center font-size-14"> <text>-</text> <text class="mar-l-5 mar-r-5">具体说说您的意见</text> <text>-</text></view>
				<view class="pt-top flex text-middle align-center mar-t-10">
					<view class="font-size-16 font-bold font-color-9b title">
						<text>服务态度</text>
					</view>
					<view class="flex-1 pj-rate">
						<htz-rate v-model="score_info.fwtd"></htz-rate>
					</view>
				</view>
				<view class="pt-top flex text-middle align-center mar-t-15">
					<view class="font-size-16 font-bold font-color-9b title">
						<text>服务内容</text>
					</view>
					<view class="flex-1 pj-rate">
						<htz-rate v-model="score_info.nx"></htz-rate>
					</view>
				</view>
				<view class="pt-top flex text-middle align-center mar-t-10">
					<view class="font-size-16 font-bold font-color-9b title">
						<text>服务效果</text>
					</view>
					<view class="flex-1 pj-rate">
						<htz-rate v-model="score_info.qhd"></htz-rate>
					</view>
				</view>

				<view class="remark mar-t-30 font-size-16">
					<textarea placeholder-style="color:#888;" placeholder="请输入评价内容..." v-model="remark" />
				</view>
				
			</view>
		</view>
		<view class="tipText font-size-14 font-color-999 text-center">
			报名、签到、评价各得5积分，当天最高不得超过20分
		</view>
		<button class="footer" @click="sub">确认提交</button>
	</view>
</template>

<script>
import htzRate from '@/components/htz-rate'
import { evaluateCreate } from '@/utils/http'
export default {
	data() {
		return {
			apply_id:'',
			type:"social_help_log",
			order_no: '',
			score_info: {zhpf: 0,nx:0, fwtd: 0,qhd: 0},
			remark: '',
			anonymous:'no',
			loading:false
		}
	},
	components: {
		htzRate
	},
	methods: {
		checkboxChange(e){
			let current_anonymous = this.anonymous;
			this.anonymous = current_anonymous == 'no' ? 'yes':'no';
		},
		sub() {
			const _that = this
			this.loading = true
			evaluateCreate({
				type: this.type,
				order_no: this.order_no,
				score_info: JSON.stringify(this.score_info),
				remark: this.remark,
				anonymous:this.anonymous
			}).then(res => {
				if (res) {
					this.loading = false
					this.successToShow('评价成功', function() {
						_that.redirect('/pages/social/index')
					})
				}
			}).finally(res=>{
				this.loading = false
			})
		}
	},
	onLoad(options) {
		
		this.order_no = options.order_no
	}
}
</script>

<style scoped>
page{
    background-color: #F4F5FA !important;
}

.pj-top{
	padding: 10px 15px;
}
.pj-top .tag-lag{
	background-color: #0088FF;
    width: 4px;
    height: 20px;
    border-radius: 5px;	
}
.pj-card {
	padding-left: 10px;
	padding-right: 10px;
	box-shadow: 1px 2px 5px 1px rgba(241, 237, 237, 0.884);
}
.pj-card .pj-rate {
	margin-left: 30px;
}
.pt-top .title{
	width: 100px;
	text-align: justify;
	text-align-last: justify;
}
.remark textarea {
	width: auto !important;
	padding: 15px 8px;
	border: 1px solid #bbbbbb;
	border-radius: 5px;
	background-color: #F5F6F7;
}
</style>